<template>
  <div>
    {{msg}}
    <br>
    {{info}}
    <br>
    <!--    {{ JSON.stringify(cnjc) }}-->

    <ul>
      <li v-for="value in cnjc">
        {{ value }}
      </li>
    </ul>


    {{postres}}

    <br>
<!--    <button @click="dblReq">获取首页信息</button>-->
  </div>
</template>

<script>
  import axios from 'axios';
  export default {
    name: "AxiosTest",
    data() {
      return {
        msg: '123qwe',
        info: '',
        cnjc: [],
        postres: null
      }
    },

    mounted() {

      //------axios 并发请求-----------------------------------------
      //https://segmentfault.com/a/1190000019882188?utm_source=tag-newest
      //axios.all()、axios.spread()两个辅助函数用于处理同时发送多个请求，可以实现在多个请求都完成后再执行一些逻辑。
      // 注意：该方法是axios的静态方法，不是axios实例的方法！
      var me = this;
      this.$axios.all([me.getAllTask(),me.getAllCity()])
        .then(me.$axios.spread(function(allTask, allCity){
          console.log('所有请求完成')
          console.log('请求1结果',allTask)
          console.log('请求2结果',allCity)
          me.info = allTask.data.test;
          me.cnjc = allCity.data.sites;

        }));





      //------------------------------------------------------------------------------

      //不使用proxyTable,后端接口设置允许跨域访问
      this.doGetByAxios('https://www.fastmock.site/mock/5eae0d42eb20a2d3b118434f40301d71/mock/test123');



      //--------Axios---GET 方法传递参数格式如下：------------------------------
      /**
       * 直接在 URL 上添加参数 ID=12345
       axios.get('/user?ID=12345').then(function (response) {
          console.log(response);
        }).catch(function (error) {
          console.log(error);
        });


       // 也可以通过 params 设置参数：
       axios.get('/user', {
        params: {
          ID: 12345
        }
      }).then(function (response) {
          console.log(response);
        }).catch(function (error) {
          console.log(error);
        });
       */
      //----------------------------------------------


      this.$axios.post('/try/ajax/demo_axios_post.php')
        .then(response => {

          console.log('post res: '+JSON.stringify(response))
           this.postres = JSON.stringify(response.data)

          }
        ).catch(function (error) { // 请求失败处理
          console.log(error);
        });

      //======Axios===POST 方法传递参数格式如下========================================
      /**
       *  axios.post('/user', {
        firstName: 'Fred',        // 参数 firstName
        lastName: 'Flintstone'    // 参数 lastName
      }).then(function (response) {
          console.log(response);
        }).catch(function (error) {
          console.log(error);
        });
       */

      //============================================




    },
    methods: {

      getAllTask:function(){
        console.log('调用第一个接口')
        return this.$axios({
          url:'/api/t1',
          method:'GET',
          // params:{
          //   offset:1,
          //   pageSize:10
          // }
        })
      },
      getAllCity:function(){
        console.log('调用第二个接口')
        return this.$axios({
          url:'/try/ajax/json_demo.json',
          method:'GET',
        })
      },

      doGetByAxios(url) {
        this.$axios.get(url).then(res => {
          console.log('axios res: ' + JSON.stringify(res))
          this.msg = res.data.qwer;
        }).catch(err => {
          console.log('axios catch: ' + JSON.stringify(err))
        })
      },


      // dblReq(){
      //   function req1() {
      //      return axios.get('/api/t1');
      //   }
      //   function req2() {
      //     return axios.get('/try/ajax/json_demo.json')
      //   }
      //   axios.all([req1(),req2()]).then( axios.spread(function (res1, res2) {
      //     // 两个请求现在都执行完成
      //     console.log(JSON.stringify(res1));
      //     console.log(JSON.stringify(res2));
      //     // console.log(res1.data.test);
      //     // console.log(res2.data.sites);
      //
      //
      //     req1() == res1;
      //     req2() == res2;
      //
      //
      //
      //
      //   }));


      // },





    },


  }
</script>

<style scoped>

</style>
